import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
} from 'react-native';

import HttpUtils from '../../../utils/HttpUtils';
import HttpUrls from '../../../utils/HttpUrls';
import Constant from '../../../utils/Constant'//全局变量
import Header from "../../../components/header";
import Loading from '../../../utils/Loading';

let navigation

const screenW = Dimensions.get('window').width;

export default class CarTrackPage extends Component {

    constructor(props) {
        super(props);
        let carId = this.props.route && this.props.route.params && this.props.route.params.carId ? this.props.route.params.carId : ''
        this.state = {
            carId,
            isRefresh: false,
            datasource: [],
            loaded: false,
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    }

    componentDidMount() {
        this.getCarTrack()
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>

                <Header navigation={navigation} Title={'车辆轨迹'} />

                <View style={{ backgroundColor: '#ffffff', flex: 1, }}>
                    <FlatList
                        style={{ backgroundColor: '#F9F9F9', width: screenW }}
                        data={this.state.datasource}
                        renderItem={this.renderItemView.bind(this)}
                        extraData={this.state}
                        onRefresh={this.refreshData}
                        refreshing={this.state.isRefresh}
                        ListFooterComponent={this.renderFooter.bind(this)}
                        ListEmptyComponent={this.state.loaded ? this.renderEmpty.bind(this):''}
                    />
                </View>
                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        );
    }

    getCarTrack() {
        let param = {
            carId: this.state.carId
        }
        if (this.Loading) {
            this.Loading.show();
        }
        HttpUtils.getRequest(HttpUrls.getTrailByCarId, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }

                let data = result.data
                this.setState({
                    loaded: true,
                    datasource: data
                })

            })
            .catch((error) => {
                this.setState({
                    loaded: true
                })
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    renderItemView({ item, index }) {
        return (
            <View key={index} style={styles.itemBox}>
                <View style={styles.timeBox}>
                    <View style={[styles.dotBox, {backgroundColor: item.isHighlight == 1 ? '#ED542E':'#D9D9D9'}]}>
                        <View style={styles.dot} />
                    </View>
                    <Text style={styles.timeText}>{item.createTime}</Text>
                </View>
                <View style={styles.dataBox}>
                    <View style={styles.nameBox}>
                        <Text style={[styles.typeText,{color: item.isHighlight == 1 ? '#ED542E':'#222222', fontWeight: item.isHighlight == 1 ? '600':'400'}]}>{item.title}</Text>
                        <Text style={styles.nameText}>{item.operator}</Text>
                    </View>
                    <View style={styles.desBox}>
                        <Text style={styles.desText}>{item.content}</Text>
                    </View>
                </View>
                {
                    index < this.state.datasource.length - 1 ?
                        <View style={styles.lineStyle} />
                        :
                        null
                }

            </View>
        )
    }

    renderFooter() {
        return(
            <View style={{height:10+Constant.bottomHeight}}/>
        )
    }

    renderEmpty() {
        if (!this.state.isRefresh) {
            return (
                <NoData Desc="暂无数据" style={{ marginTop: gREM(200) }} />
            )
        } else {
            return (
                null
            )
        }
    }

    refreshData = () => {

        this.getCarTrack();

    }


}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
    },
    itemBox: {
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        width: '100%',
        paddingHorizontal: 16
    },
    timeBox: {
        left: 16,
        position: 'absolute',
        zIndex: 1000,
        marginTop: 18,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    dotBox: {
        width: 10,
        height: 10,
        backgroundColor: '#D9D9D9',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5
    },
    dot: {
        width: 4,
        height: 4,
        backgroundColor: '#ffffff',
        borderRadius: 2
    },
    timeText: {
        marginLeft: 12,
        color: '#999999',
        fontSize: 12
    },
    dataBox: {
        marginTop: 42,
        marginLeft: 20,
        width: screenW - 52,
        flex: 1,
        paddingHorizontal: 14,
        paddingVertical: 15,
        borderRadius: 6,
        backgroundColor: '#ffffff'
    },
    nameBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    typeText: {
        color: '#222222',
        fontSize: 16,
    },
    nameText: {
        color: '#222222',
        fontSize: 14,
    },
    desBox: {
        marginTop: 15,
        flexDirection: 'row',
        padding: 10,
        backgroundColor: '#F5F5F5',
    },
    desText: {
        color: '#666666',
        fontSize: 12,
        lineHeight: 18
    },
    lineStyle: {
        zIndex: 0,
        position: 'absolute',
        left: 20,
        top: 28,
        height: '100%',
        width: 0,
        borderColor: '#E6E6E6',
        borderWidth: 1,
        borderStyle: 'dashed',
        borderRadius: 0.5
    },
    bottomView: {
        width: '100%',
        height: 34,
    },

})